<template>
    <div class="codemirrorView">
        <div class="codemirrorView_head">
            <a-button @click="onCancel">{{$ti18('rxForm.closeBtn','关闭')}}</a-button>
            <a-button type="primary" @click="modifyHtml(oldHtml,oldMobileHtml,onCancel)">
                {{i18n('codemirror.fallback','回退版本')}}
            </a-button>
        </div>
        <a-tabs default-value="1" @change="callback">
            <a-tab-pane :tab="i18n('codemirror.computer','电脑端HTML')" key="1" forceRender>
                <div class="codemirrorView_content">
                    <div style="overflow: hidden">
                        <div class="codemirrorView_content_original">
                            {{i18n('codemirror.originalData','原数据')}}
                        </div>
                        <div class="codemirrorView_content_current">
                            {{i18n('codemirror.currentData','当前数据')}}
                        </div>
                    </div>
                    <div class="codemirrorViewCodeMirror"  ref="htmlCodemirror" style="width:100%;height:100%;"></div>
                </div>
            </a-tab-pane>
            <a-tab-pane :tab="i18n('codemirror.phone','手机端HTML')" key="2" forceRender>
                <div class="codemirrorView_content">
                    <div style="overflow: hidden">
                        <div class="codemirrorView_content_original">
                            {{i18n('codemirror.originalData','原数据')}}
                        </div>
                        <div class="codemirrorView_content_current">
                            {{i18n('codemirror.currentData','当前数据')}}
                        </div>
                    </div>
                    <div class="codemirrorViewCodeMirror"  ref="mobileHtmlCodemirror" style="width:100%;height:100%;"></div>
                </div>
            </a-tab-pane>
        </a-tabs>
    </div>
</template>

<script>
import * as monaco from 'monaco-editor'
import {RxFit, RxLayout,Util} from "@lowcode/jpaas-common-lib";

export default {
    name: "codemirrorView",
    components: {
        RxFit,
        RxLayout
    },
    props: {
        layerid: {
            type: String,
            default: ""
        },
        destroy: {
            type: Function
        },
        curHtml: {
            type: String,
            default: ""
        },
        oldHtml: {
            type: String,
            default: ""
        },
        curMobileHtml:{
            type: String,
            default: ""
        },
        oldMobileHtml:{
            type: String,
            default: ""
        },
        modifyHtml: {
            type: Function
        }
    },
    data() {
        return {
            diffEditor: null,
            diffEditorMobile:null,
            originalModel: null,
            originalHtml:null,
            modifiedModel: null,
            modifiedHtml: null,
            mobile:false,
        }
    },
    mounted() {
        let self = this;
        setTimeout(function(){
            self.diffEditor = monaco.editor.createDiffEditor(self.$refs.htmlCodemirror, {
                enableSplitViewResizing: true,
                renderSideBySide: true, // 设置为 true 以并排显示两个编辑器
            });
            self.initUI(self.oldHtml,self.curHtml)
        },500)
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"formBoList",key);
        },
        callback(key){
            if(this.mobile){
                return
            }
            if(key==2){
                let self = this;
                setTimeout(function(){
                    self.diffEditorMobile = monaco.editor.createDiffEditor(self.$refs.mobileHtmlCodemirror, {
                        enableSplitViewResizing: true,
                        renderSideBySide: true, // 设置为 true 以并排显示两个编辑器
                    });
                    self.initUIMobile(self.oldMobileHtml,self.curMobileHtml);
                    self.mobile = true
                },500)
            }

        },
        initUI(oldValue, curValue) {
            let originalUri = monaco.Uri.parse('original://Html/1');
            let modifiedUri = monaco.Uri.parse('modified://Html/2');
            this.originalHtml = monaco.editor.createModel(
                oldValue,
                'html',
                originalUri
            );

            this.modifiedHtml = monaco.editor.createModel(
                curValue,
                'html',
                modifiedUri
            );
            this.diffEditor.setModel({
                original: this.originalHtml,
                modified: this.modifiedHtml,
            });

        },
        initUIMobile(oldValue, curValue) {
            let originalUri = monaco.Uri.parse('original://mobile/1');
            let modifiedUri = monaco.Uri.parse('modified://mobile/2');
            this.originalModel = monaco.editor.createModel(
                oldValue,
                'html',
                originalUri
            );

            this.modifiedModel = monaco.editor.createModel(
                curValue,
                'html',
                modifiedUri
            );
            this.diffEditorMobile.setModel({
                original: this.originalModel,
                modified: this.modifiedModel,
            });
        },
        onCancel(){
            Util.closeWindow(this,"cancel");
        },
    },
    beforeDestroy() {
        // 组件销毁前，销毁 DiffEditor 和模型
        if (this.diffEditor) {
            this.diffEditor.dispose();
        }
        if (this.diffEditorMobile) {
            this.diffEditorMobile.dispose();
        }
        if (this.originalModel) {
            this.originalModel.dispose();
        }
        if (this.modifiedModel) {
            this.modifiedModel.dispose();
        }
        if (this.originalHtml) {
            this.originalHtml.dispose();
        }
        if (this.modifiedHtml) {
            this.modifiedHtml.dispose();
        }
    },
    watch: {}
}
</script>

<style scoped>
.codemirrorViewCodeMirror >>> .CodeMirror-merge, .codemirrorViewCodeMirror >>> .CodeMirror-merge .CodeMirror,.codemirrorViewCodeMirror >>> .CodeMirror-merge-pane,.codemirrorViewCodeMirror >>> .CodeMirror-scroll{
    height: 100% !important;
}
.codemirrorViewCodeMirror >>> .CodeMirror-wrap pre.CodeMirror-line,.codemirrorViewCodeMirror >>> .CodeMirror-wrap pre.CodeMirror-line-like{
    margin-left: 10px;
}
.codemirrorView_content_original{
    width: 64px;
    height: 30px;
    background-color: #4287fa;
    border-radius: 0px 10px 0px 0px;
    color: white;
    line-height: 30px;
    text-align: center;
    float: left;
}
.codemirrorView_content_current{
    width: 76px;
    height: 30px;
    background-color: #24c075;
    border-radius: 10px 0px 0px 0px;
    color: white;
    line-height: 30px;
    text-align: center;
    float: right;
}
.codemirrorView_content{
    width: 100%;
    padding:0px 20px 20px 20px;
    height: calc(100% - 50px);

}
.codemirrorView_content >div{
    flex: 1;
}
.codemirrorView_tab{
    margin:12px auto;
    width: 170px;
}
.codemirrorView{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.codemirrorView_head button{
    float: right;
    margin: 10px;
}
.codemirrorView_head button:nth-child(2){
    margin-right: 0px;
}
.codemirrorView>div:nth-child(1){
    border-bottom: 1px solid #e6e8eb;
}
.codemirrorView>div:nth-child(2){
    flex: 1;
    overflow: auto;
}
</style>
